<template>
  <el-container>
    <el-main>
      <!-- 表格  -->
      <vxe-grid
        ref="mainTable"
        column-key
        context-menu
        v-grid-drag-col
        :height="$store.getters.scrollerHeight()"
        :toolbar="tableToolbar"
        :columns="tableColumn"
        :data="tableData"
        :export-config="{filename:'定时任务',sheetName:'定时任务'}"
      >
        <!-- 快速查询 -->
        <template v-slot:toolbar_search>
          <rayd-quick-query v-model="filterName" @query="query"></rayd-quick-query>
        </template>
        <!-- 业务按钮 -->
        <template v-slot:toolbar_buttons>
          <el-button round type="primary" icon="el-icon-plus" @click="handleAdd" v-permission-btn="'Add'">新增</el-button>
          <el-button round type="warning" icon="el-icon-edit" @click="handleEdit" v-permission-btn="'Edit'">编辑</el-button>
          <el-button round type="danger" icon="el-icon-delete" @click="handleDelete" v-permission-btn="'Delete'">删除</el-button>
          <el-divider direction="vertical"></el-divider>
        </template>
        <!-- 禁用/启用模板 -->
        <template v-slot:B_EnabledMark="{ row }">
          <vxe-switch v-model="row.B_EnabledMark" on-label="运行" :on-value="1" off-label="停止" :off-value="0" @change="ChangeState(row)" v-permission-btn="'ChangeState'"></vxe-switch>
        </template>
      </vxe-grid>
    </el-main>
    <!-- 拟态窗口 -->
    <Form ref="mainForm" @refresh="query()" />
  </el-container>
</template>

<script>
import { Job } from "@/api";
import Form from "./Form.vue";
export default {
  components: { Form },
  data() {
    return {
      /* vxe-grid */
      filterName: "", //查询实体
      tableData: [], //表格实体
      //工具栏配置
      tableToolbar: {
        export: true,
        refresh: { 
          query : ()=> {
            this.filterName = ''; //清空条件
            this.query();
          }
        },
        zoom: true,
        custom: true
      },
      //列配置
      tableColumn: [
        {
          type: "seq",
          title: "序号",
          align: "left",
          width: 60,
        },
        { type: "html", field: "B_JobName", title: "任务名称", width: 150, sortable: true },
        { 
          field: "B_JobTerminal", 
          title: "执行终端", 
          width: 150, 
          sortable: true,
          cellRender: {
            name: 'dataitem',
            code: "JobTerminal" 
          }, 
        },
        {
          type: "html",
          field: "B_RunCount",
          title: "执行次数",
          sortable: true,
          width: 100,
        },
        {
          type: "html",
          field: "B_LastRunTime",
          title: "最后一次执行",
          sortable: true,
          width: 200,
          formatter: ["toDateString", "yyyy-MM-dd HH:mm:ss"],
        },
        { type: "html", field: "B_JobCall", title: "任务地址", width: 300, sortable: true },
        { type: "html", field: "B_Cron", title: "CRON表达式", width: 150, sortable: true },
        { type: "html", field: "B_Remark", title: "备注", width: 300, sortable: true },
        {
          type: "html",
          field: "B_EnabledMark",
          title: "运行状态",
          width: 100, 
          sortable: true,
          fixed: "right",
          slots: { default: "B_EnabledMark" },
        },
      ],
      /* 实体数据 */
    };
  },
  created() {
    //初始化
    this.init();
  },
  methods: {
    //初始化
    init() {
      this.$store.commit("SET_ISLOADING",true);
      /* 初始化数据源 */
      Promise.all([]).then(() => {
        this.query()
      });
    },
    //列表数据
    query() {
      this.$store.commit("SET_ISLOADING",true);
      return Job.GetList({queryjson:JSON.stringify({QueryInfo:this.filterName})}).then((res) => {
        this.tableData = res;
        this.$store.commit("SET_ISLOADING",false);
      });
    },
    //状态变更
    ChangeState(row) {
      Job.ChangeState(row).catch((err) => {
        //状态归位
        row.B_EnabledMark = !row.B_EnabledMark;
      });
    },
    //新增
    handleAdd() {
      this.$refs["mainForm"].formOpen();
    },
    //编辑
    handleEdit() {
      let row = this.$refs["mainTable"].getCurrentRecord();
      if (row) {
        this.$refs["mainForm"].formOpen(row);
      }else{
        this.$message.warning("请选择数据行！");
      }
    },
    //删除
    handleDelete() {
      let row = this.$refs["mainTable"].getCurrentRecord();
      if (row) {
        this.$confirm("确认永久删除该行数据?", "提示", { type: "warning" })
          .then(() => {
            Job.Delete(row).then((res) => {
              this.query(); // 刷新表格
            });
          })
          .catch((e) => {});
      }else{
        this.$message.warning("请选择数据行！");
      }
    },
  },

};
</script>

